<template>
	<view class="helpCenter">
		<view class="center-list-box">
		<view class="center-list-top" >
			<view class="center-item" v-for="(item,index) in centerListTop" :key="index">
			<view class="item-left">
				<icon-svg :icon-class="item.icon"/>
			</view>
			<view class="item-center">
				<view>{{item.title}}</view>
			</view>
			<view class="item-right">
				<icon-svg icon-class="icon-test7"/>
			</view>
		 </view>
		</view>
		<view class="center-list-bottom" style=" margin-top: 20rpx;" >
			<view class="center-item" v-for="(item,index) in centerListBottom" :key="index">
			<view class="item-left">
				<icon-svg :icon-class="item.icon"/>
			</view>
			<view class="item-center">
				<view>{{item.title}}</view>
			</view>
			<view class="item-right">
				<icon-svg icon-class="icon-test7"/>
			</view>
		 </view>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				currentIndex:0,
				centerListTop:[
				    {icon:'weibiaoti2fuzhi12-copy',title:'体验中心'},
				    {icon:'wenti-shuben',title:'帮助手册'},
				  
				],
				centerListBottom:[
					{icon:'phone',title:'电话服务'},
					{icon:'kefu-copy',title:'在线客服'},
				]
			}
		}
	}	
</script>
<style lang="scss" scoped>
.helpCenter{
	position: relative;
	.center-list-box{
	 position: absolute;
	 top: 20rpx;
	 right: 0;
	 left: 0;
	.center-list-top,.center-list-bottom{
	 background: #fff;
	.center-item{
	  display: flex;
	  justify-content: space-between;
	  line-height: 90rpx;
	  height: 90rpx;
	  border-bottom:1px solid #F9FAF9 ;
	   .item-left{
		  .svg-icon{
			  color:#7FC9D1;
			  font-size: 1.2em;
		  }
		  margin-left: 20rpx;
		  width: 10%; 
	   }
	  .item-center{
	  	width: 70%;
		margin-left: 20rpx;
	  }
	  .item-right{
		text-align: right;
	  	width: 20%;
		.svg-icon{
		color: #D1D6D9;
		margin-right: 10rpx;
		}
	  }
	}
	}
	}
}
</style>
